import React,{Component} from 'react';
import Head from './common/Head';
import { Table,Input,Button,Row, Col, Divider, message, Form } from 'antd';
import axios from 'axios';

const FormItem = Form.Item;

class ProductForm extends Component{

    constructor(props){
        super(props);

        this.state = {
            urlpath:this.props.match.path,
            columns : [{
                title: '型号',
                dataIndex: 'proModel',
                key: 'proModel'
            },{
                title: '全称',
                dataIndex: 'proName',
                key: 'proName'
            },{
                title: '条形码',
                dataIndex: 'barCode',
                key: 'barCode'
            },{
                title: '套件',
                dataIndex: 'proSuit',
                key: 'proSuit'
            },{
                title: '操作',
                dataIndex: 'operate',
                key: 'operate',
                render:(text, record) => (
                    <span>
                        编辑
                        <Divider type="vertical" />
                        <a onClick={()=>this.printBarCord(record)}>打印</a>
                    </span>
                )
            }],
            data : []
        }

    }

    componentDidMount(){
        this.getProductByName()
    }

    //查询商品
    getProductByName=(e)=>{
        if(e) {
            e.preventDefault();
        }
        this.props.form.validateFields((err, values) => {
            if (!err) {
              axios.get(`${global.constants.apiPath}/product/getProductByName.htm`,{
                  params:{
                      proName:values.proName,
                      barCode:values.barCode
                  }   
              }).then((response)=>{
                  if(response.data.code === "0"){
                      this.setState({
                          data:response.data.content
                      })
                  } else {
                      message.error(response.data.desc);
                  }
              })
            }
        });
    }

    //打印条形码
    printBarCord =(record)=> {
        let newWindow = window.open();
        newWindow.document.write('<body style="height: 40mm;width: 30mm;font-size: 1mm;"><div style="border-bottom:solid;">'+record.proName+'</div><div style="border-bottom:solid;">'+record.proModel+'</div><img src="'+record.barCodeImg+'" style="margin-top:1px;width:80%"></body>');
        setTimeout(() => {
            newWindow.print();
            // newWindow.close();
        }, 100);
    }


    render(){
        const {
            getFieldDecorator
          } = this.props.form;

        return(
            <div>
                <Head urlpath={this.state.urlpath}></Head>
                <Form layout="inline" onSubmit={this.getProductByName} style={{margin:'20px'}}>
                    <Row>
                        <Col span={6}></Col>
                        <Col span={6}>
                            <Form.Item label="条形码">
                                {getFieldDecorator('barCode', {
                                        rules: [{ required: false, message: '' }],
                                    })(
                                        <Input placeholder="条形码"/>
                                )}
                            </Form.Item>
                        </Col>
                        <Col span={6}>
                            <Form.Item label="商品名称">
                                {getFieldDecorator('proName', {
                                        rules: [{ required: false, message: '' }],
                                    })(
                                        <Input placeholder="商品名称"/>
                                )}
                            </Form.Item>
                        </Col>
                        <Col span={6}>
                            <Form.Item>
                                <Button type="primary" htmlType="submit">
                                    搜索
                                </Button>
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
                <Table rowKey={record => record.id} columns={this.state.columns} dataSource={this.state.data} />
            </div>
        );
    }
}

const Product = Form.create()(ProductForm);
export default Product;